<template>
  <div>
    <div class="card" style="margin-bottom: 8px">
        <el-input style="width: 240px" v-model="input" placeholder="请输入名称查询" prefix-icon="Search" />
      <el-button type="primary">查询</el-button>
      <el-button type="primary">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 8px">
      <el-button type="primary">新增</el-button>
      <el-button type="primary">批量删除</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>

    <div class="card" style="margin-bottom: 8px">
      <el-table :data="data.tableData" stripe>
        <el-table-column  label="日期" prop="date" />
        <el-table-column  label="名称" prop="name" />
        <el-table-column  label="地址" prop="address" />
      </el-table>
      <div class="card" style="margin-bottom: 8px">
        <el-pagination
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
        />
      </div>
    </div>


  </div>
</template>


<script setup>
import {reactive} from "vue";

const data = reactive({
  name:null,
  tableData:[
    {id:1, date:'2024-2-4',name:'鸡哥',address:'坤国'},
    {id:2, date:'2024-2-4',name:'阿虎',address:'美国'},
    {id:3, date:'2024-2-4',name:'花花',address:'法国'},
  ],
  pageNum:1,
  pageSize:10,
  total:47,

})
</script>



<style scoped>

</style>